/*
 * @Author: zhangyujie
 * @Date:   2015-08-12 10:42:41
 * @Last Modified by:   zhangyujie
 * @Last Modified time: 2015-08-12 15:34:02
 */

//define(['jquery', 'd3'], function($, d3) {
//	function slideBar() {


define(['jquery', 'd3', 'util','hammer'], function($, d3,util,Hammer) {
	function slideBar(i,url) {
		var setting = {
			selector: i,
			startyear: 2015,
			startmonth: 11,
			series: [{
				'name': '当前收取佣金',
				'data': [],
				'month': []
			}, {
				'name': '预计收取佣金',
				'data': [],
				'month': []
			}],
			colorset: ['#8bc6fd', '#ffc853'],
			margin: {
				top: 10,
				right: 10,
				left: 5,
				bottom: 40
			}
		}
		eight(setting)

		function eight(setting) {

			d3.json(url, function(dataset) {
				var dataLength = dataset.data.distribution.length
				var dataLength1 = dataset.data.noDistribution.length
				for (var i=0;i<dataLength;i++) {
					setting.series[0].data.push(dataset.data.distribution[i].total)
					setting.series[0].month.push(dataset.data.distribution[i].payTime)

				}
				for (var j=0;j<dataLength1;j++) {
					setting.series[1].data.push(dataset.data.noDistribution[j].total)
					setting.series[1].month.push(dataset.data.noDistribution[j].payTime)
				}

				var data = setting.series
				var selector = setting.selector
				var width = document.querySelector(selector).offsetWidth

				var xScaleData = []
				var tittleData = []
				var d = new Date()
				var year = d.getFullYear()
				var month = d.getMonth()
				if (month<10) {
					month = '0'+month
				}
				var time = year + "-" + month

				data[0].month.forEach(function(d, i) {
					xScaleData.push(d)
				})

				data[1].month.forEach(function(d, i) {
					xScaleData.push(d)
				})
				var finished = xScaleData.length
				data[0].data.forEach(function(d, i) {
					tittleData.push(d)
				})

				data[1].data.forEach(function(d, i) {
					tittleData.push(d)
				})

				if (finished > 12) {
					var relcontentW = finished*0.24 * width
				} else if (finished < 6){
					var relcontentW = 1.2 * width
				} else {
					var relcontentW = 2.2 * width
				}
				var colorset = setting.colorset,

					height = document.querySelector(selector).offsetHeight,
					margin = setting.margin,

					contentW = relcontentW - margin.left - margin.right,
					contentH = height - margin.top - margin.bottom

				var index = null

				var svg = d3.select(selector)
					.append('svg')
					.attr('width', relcontentW)
					.attr('height', height)
					.attr("class", "eight")


				var xScale = d3.scale.ordinal()
					.domain(xScaleData)
					.rangeBands([0, contentW], 0)

				var xAxis = d3.svg.axis()
					.scale(xScale)
					.orient('bottom')
					.tickValues(xScaleData)

				var yScale = d3.scale.linear()
					.domain([50, 0])
					.range([0, contentH])


				svg.append('g')
					.attr('class', 'axis')
					.classed('xAxis', true)
					.attr('transform', 'translate(' + margin.left + ',' + (margin.top + contentH) + ')')
					.call(xAxis)


				for (var i = 0; i < finished; i++) {
					if (xScaleData[i] == time) {
						index = i + 1
					}

				}

				// var legend = svg.append("g")
				// 	.attr('transform', 'translate(' + (contentW-60)  + ',' + (contentH-70) + ')')
				// 	.attr("class","legend")
				// 	legend.append("rect")
				// 		.attr("x","0")
				// 		.attr("y","15")
				// 		.attr("width","10px")
				// 		.attr("height","10px")
				// 		.attr("fill",function() {
				// 			return colorset[1]
				// 		})

				// 	legend.append("rect")
				// 		.attr("x","0")
				// 		.attr("y","0")
				// 		.attr("width","10px")
				// 		.attr("height","10px")
				// 		.attr("fill",function() {
				// 			return colorset[0]
				// 		})
				// 	legend.append("text")
				// 		.attr("x","12")
				// 		.attr("y","9")
				// 		.text("当前收取佣金")

				// 	legend.append("text")
				// 		.attr("x","12")
				// 		.attr("y","24")
				// 		.text("预计收取佣金")

				var content = svg.append('g')
					.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

				//生成图表
				content.selectAll('rect')
					.data(xScaleData)
					.enter()
					.append('rect')
					.attr('x', function(d, i) {

						return xScale(xScaleData[i])
					})
					.attr('y', function(d, i) {
						return contentH - 30
					})
					.attr('width', contentW / finished - 1)
					.attr('height', function(d, i) {

						return 10
					})
					.attr('height', 15)
					.attr("fill", function(d, i) {
						if (i < index) {
							return colorset[0]
						} else {
							return colorset[1]
						}
					})
				svg.select(".xAxis")
					.selectAll("g:nth-child(" + (index + 1) + ")")
					.append("image")
					.attr("x", -24)
					.attr("y", -122)
					.attr("width", 50)
					.attr("height", 140)
					.attr("xlink:href", "/resources/app/images/chart/line.png");
				//柱子中的文本
				content.selectAll("text")
					.data(xScaleData)
					.enter()
					.append("text")
					.attr('x', function(d, i) {

						return xScale(xScaleData[i]) + contentW / (finished * 2) - 7
					})
					.attr('y', function(d, i) {
						return contentH - 17
					})
					.text(function(d, i) {
						return tittleData[i]
					})
					.style("fill", "#000")
				//选中月份
				svg.select(".xAxis path").remove()
				svg.select(".xAxis line").remove()
				svg.select(".xAxis")
					.selectAll("g:nth-child(" + (index + 1) + ")")
					.attr("class", "selected")
					.append("rect")
					.attr('transform', 'translate(' + -contentW / (finished * 2) + ',8)')
					.attr("width", contentW / finished)
					.attr("height", 17)
					.attr("fill", "#a6a6a6")

				svg.select(".xAxis")
					.selectAll("g:nth-child(" + (index + 1) + ")")
					.select("text")
					.attr("class", "selectText")



				svg.select(".selected").append("text")
					.text(function() {
						return svg.select(".selectText").text()
					})
					.style("fill", "#fff")
					.attr('dy', function() {
						return svg.select(".selectText").attr("dy")
					})
					.attr('x', function() {
						return svg.select(".selectText").attr("x")
					})
					.attr('y', function() {
						return svg.select(".selectText").attr("y")
					})
					.attr("text-anchor", "middle")


				var hammertime = new Hammer(document.querySelector(".eight"));
				//添加事件
				var cur = 0

				var ulWidth = $(".eight").width()

				var num = 0
				var flag = false
				var speed = 0.08
				hammertime.on("pan", function(e) {


					cur += e.deltaX;

					if (cur * speed > 0) {
						cur = 0;
						$(".eight").css("margin-left", 0)

						return
					}
					if (cur * speed < -ulWidth + width) {
						cur = (-ulWidth + width) / speed

						$(".eight").css("margin-left", -ulWidth + width)

						return
					}

					$(".eight").css("margin-left", cur * speed)
				})
			})
		}
	}

	return {
		slideBar: slideBar
	}
})